<template>
	<view class="tracks_wrapper">
		<view class="collection_wrapper flex-between">
			<view class="coll-left">
				<up-icon name="info-circle" color="#333" size="14"></up-icon>
				<text>共收藏{{collectionNum}}条</text>
			</view>

			<view class="coll-right" @click="handleShowSelect">
				<text>{{!showSelect?'收藏管理':'取消'}}</text>
			</view>

		</view>
		<view class="track_content">
			<view class="track_list">
				<view class="track_item" v-for="(item,index) in trackList" :key="index">
					<view class="track_item_header">{{item.datetime}}</view>
					<view class="track_info" v-if="false">
						<view class="serve-item">
							<view class="serve-master">
								<image src="/static/img/serve/people.png"></image>
								<view class="master-tit">
									<text>香港移民</text>
								</view>
								<view class="coll-radio" v-if="showSelect">
									<up-checkbox-group v-model="checkboxValue1" placement="column" shape="circle"
										activeColor="#FF7139" @change="checkboxChange">
										<up-checkbox :customStyle="{marginBottom: '8px'}">
										</up-checkbox>
									</up-checkbox-group>
								</view>

							</view>
							<view class="serve-detail-info">
								<view class="detail-info-list flex-between">
									<view class="detail-item">
										<text class="detail-val">9-12个月</text>
										<text class="detail-label">办理周期</text>
									</view>
									<view class="detail-item">
										<text class="detail-val">临时居民</text>
										<text class="detail-label">签证类型</text>
									</view>
									<view class="detail-item">
										<text class="detail-val">166个</text>
										<text class="detail-label">免签国家</text>
									</view>
									<view class="detail-item">
										<text class="detail-val">以香港为家</text>
										<text class="detail-label">居住要求</text>
									</view>
								</view>
							</view>
							<view class="serve-other flex-between">
								<view class="serve-other-star">
									<text>推荐指数</text>
									<up-rate :count="count" v-model="value" active-color="#FF7139"
										inactive-color="#b2b2b2"></up-rate>
								</view>
								<view class="serve-other-link" @tap="handleSkip">
									<text>点击进入</text>
									<image src="/static/img/serve/more.png"></image>
								</view>
							</view>
						</view>
					</view>
					<view class="track_article">
						<up-checkbox-group v-model="checkboxValue2" placement="column" shape="circle"
							activeColor="#FF7139" @change="checkboxChange">
						<up-cell  @click="go(`/pages/zixun/details?id=${item2.consult_id}&title=${item2.consult_name}`)" v-for="(item2,index2) in item.list" class="art_cell" :title="item2.consult_name" :label="item2.consult_createtime">
							<template #icon>

								<image class="art_pic" :src="$BASE_URL+item2.image"></image>
							</template>
							<template #value>
								<view v-if="showSelect">
										<up-checkbox  :name="item2.consult_id" :customStyle="{marginBottom: '8px'}"></up-checkbox>
								</view>
							</template>
						</up-cell>
						</up-checkbox-group>
					</view>
				</view>
			</view>
		</view>
		<view class="apply-btn-wrapper" v-if="showSelect">
			<view class="apply-btn" @click="handleCancel">
				<text>取消收藏</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		unref,
		getCurrentInstance
	} from "vue"
	const {
		proxy
	} = getCurrentInstance()
	import {
		onLoad
	} from "@dcloudio/uni-app"
	const count = ref(5)
	const value = ref(4)
	const collectionNum = ref(0)
	const showSelect = ref(false)
	const checkboxValue1 = ref(false)
	const checkboxValue2 = ref([])
	const trackList = ref([]);
	const params = ref({
		page:1,
		limit:10
	});
	function getData() {
		proxy.$request({
			url: 'api/User/getBroConLists',
			header: "application/x-www-form-urlencoded",
			data: {
				page:params.value.page,
				limit:params.value.limit,
				// 1收藏  2浏览足迹
				type:1
			}
		}).then(res => {
			if (res.code == 0) {
				return proxy.$toast(res.msg)
			} else {
				if(res.data){
					collectionNum.value = res.data.count_num
					trackList.value=[]
					for(var i in res.data){
						if(i!='count_num'){
							trackList.value.push({
								datetime:i,
								list:res.data[i]
							})
						}
					}
					
				}
	
			}
		})
	}
	getData()
	function handleSkip() {
		uni.navigateTo({
			url: '/pages/serve/detail'
		})
	}
	function handleShowSelect() {
		showSelect.value = !showSelect.value
	}
	function handleCancel() {
		showSelect.value = false
		proxy.$request({
			url: 'api/User/cancelConsult',
			header: "application/x-www-form-urlencoded",
			data: {consult_id:checkboxValue2.value.join(',')}
		}).then(res => {
			if (res.code == 0) {
				return proxy.$toast(res.msg)
			} else {
				proxy.$toast(res.msg)
				getData()

			}
		})
	}
	function checkboxChange(e) {
	
	}
</script>

<style lang="scss" scoped>
	.tracks_wrapper {
		background: #F8F8F8;

		.coll-radio {
			position: absolute;
			top: 20rpx;
			right: 20rpx;
		}

		.collection_wrapper {
			font-size: 24rpx;
			padding: 0 32rpx;
			background: #FFF5EC;
			height: 80rpx;
			line-height: 80rpx;

			.coll-left {
				color: #333;
				display: flex;
				justify-content: flex-start;
				align-items: center;

				text {
					margin-left: 5rpx;
				}
			}

			.coll-right {
				color: #FF7139;
			}
		}

		.flex-between {
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

		.track_content {

			.track_list {
				.track_item {
					padding: 0 32rpx;

					.track_item_header {
						height: 80rpx;
						background: #F8F8F8;
						line-height: 80rpx;
						color: #999;
						font-size: 24rpx;


					}

					.track_info {
						background: #fff;
						padding: 20rpx 0;

						.serve-master {
							position: relative;

							image {
								width: 100%;
								height: 304rpx;
							}

							.master-tit {
								position: absolute;
								left: 0;
								right: 0;
								width: 100%;
								text-align: center;
								top: 0;
								height: 304rpx;
								line-height: 304rpx;

							}

							text {
								font-size: 36rpx;
								font-weight: bold;
								color: #fff
							}

						}

						.serve-detail-info {
							padding: 20rpx;

							.detail-info-list {
								text {
									display: block;
									margin: 8rpx 0;
								}

								.detail-val {
									color: #333;
									font-size: 28rpx;
								}

								.detail-label {
									font-size: 26rpx;
									color: #999
								}
							}

						}

						.serve-other {
							font-size: 24rpx;
							margin-bottom: 24rpx;
							padding: 0 12rpx;
							// height: 32rpx;
							// line-height: 32rpx;

							.serve-other-star {
								display: flex;
								justify-content: flex-start;
								align-items: center;
								color: #333;

								image {
									position: relative;

									width: 32rpx;
									height: 32rpx;
									top: 6rpx;
									left: 6rpx;
									margin-left: 10rpx;
								}


							}

							.serve-other-link {
								color: #999;

								image {
									width: 28rpx;
									height: 28rpx;
									position: relative;
									top: 6rpx;
								}
							}
						}
					}

					.serve-biaoqian {
						.serve-tags {
							display: flex;
							justify-content: flex-start;
							align-items: center;
							margin: 20rpx 0;

							.tag-item {
								width: 152rpx;
								height: 60rpx;
								line-height: 60rpx;
								border-radius: 16rpx;
								text-align: center;
								color: #FF9839;
								background: #FFF6EE;
								font-size: 24rpx;
								margin-left: 12rpx;
							}
						}
					}

					.track_article {
						margin-top: 20rpx;
						background: #fff;

						.art_cell {
							position: relative;
							margin-top: 20rpx;
						}

						.art_pic {
							width: 160rpx;
							height: 160rpx;
							border-radius: 16rpx;
							margin-right: 10rpx;
						}
					}
				}

			}
		}

		.apply-btn-wrapper {
			position: fixed;
			bottom: 0;
			background: #fff;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			height: 200rpx;

			.apply-btn {
				margin: 0 auto;
				height: 96rpx;
				background: linear-gradient(128deg, #FF9839 0%, #FF7139 100%);
				border-radius: 200rpx;
				width: 686rpx;
				text-align: center;
				font-size: 32rpx;
				color: #fff;
				line-height: 96rpx;
			}

			// background: rgba(0,0,0,);
		}
	}
</style>